<template>
	<div>
		<el-row class="grid-content bg-purple-dark">
			<el-col :span="1">
				<span class="el-icon-search" style="margin-top: 15px;"></span>
			</el-col>
			<el-col :span="2" style="margin-top: 10px;">
				筛选查询
			</el-col>
			<el-col :span="17">
				<div class="grid-content bg-purple"></div>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;margin-bottom: 5px;">
				<el-button type="info" size="medium" @click="addprojectrole()">新增</el-button>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;margin-bottom: 5px;">
				<el-button type="info" size="medium" @click="removeprojectrole()">删除</el-button>
			</el-col>
		</el-row>

		<el-dialog title="新增项目角色" :visible.sync="isaddprojectrole" width="30%">
			<el-form :model="newrole" :rules="addrules" ref="addrules">
				<el-form-item label="系统角色：" prop="systemName">
					<el-select v-model="newrole.systemName" placeholder="请选择系统角色">
					    <el-option
					    v-for="item in systemRoles"
					     :key="item.value"
					     :label="item.label"
					     :value="item.value">
					     </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="角色编号：" prop="rolenum">
					<el-col :span="1">
						<div></div>
					</el-col>
					<el-col :span="18">
						<el-input v-model="newrole.rolenum" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="项目角色：" prop="rolename">
					<el-col :span="18">
						<el-input v-model="newrole.rolename" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="项目状态：" prop="types">
					<el-col :span="18">
						<el-checkbox-group v-model="newrole.types">
							<div>
								<el-col :span="9">
									<el-checkbox label="新建"></el-checkbox>
								</el-col>
							</div>
							<div>
								<el-col :span="9">
									<el-checkbox label="分配"></el-checkbox>
								</el-col>
							</div>
							<div>
								<el-col :span="9">
									<el-checkbox label="处理"></el-checkbox>
								</el-col>
							</div>
							<div>
								<el-col :span="9">
									<el-checkbox label="完成"></el-checkbox>
								</el-col>
							</div>
							<!-- <div v-for="sta in states">
							<el-col :span="9" ><el-checkbox :label="sta.defectstateName"></el-checkbox></el-col>
						</div> -->
						</el-checkbox-group>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="savenewproject()">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="修改项目角色" :visible.sync="ischangeprojectrole" width="30%">
			<el-form :model="changerole" :rules="changeprole">
				<el-form-item label="角色编号：" prop="rolenum">
					<el-col :span="1">
						<div></div>
					</el-col>
					<el-col :span="18">
						<el-input v-model="changerole.rolenum" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="项目角色：" prop="rolename">
					<el-col :span="18">
						<el-input v-model="changerole.rolename" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="系统角色：">
					<el-col :span="18">
						<el-input v-model="changerole.systemSign" :disabled="true" autocomplete="off"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="项目状态：" prop="types">
					<el-col :span="18">
						<el-checkbox-group v-model="changerole.types">
							<div>
								<el-col :span="9">
									<el-checkbox label="新建"></el-checkbox>
								</el-col>
							</div>
							<div>
								<el-col :span="9">
									<el-checkbox label="分配"></el-checkbox>
								</el-col>
							</div>
							<div>
								<el-col :span="9">
									<el-checkbox label="处理"></el-checkbox>
								</el-col>
							</div>
							<div>
								<el-col :span="9">
									<el-checkbox label="完成"></el-checkbox>
								</el-col>
							</div>
						</el-checkbox-group>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="savechangeroles()">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="禁用" :visible.sync="donotstate" width="30%">
			<span>禁用成功</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="suredonot()">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="启用" :visible.sync="dostate" width="30%">
			<span>启用成功</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="suredonot()">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="删除" :visible.sync="removerolebyid" width="30%">
			<span>删除成功</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="sureremove()">确 定</el-button>
			</span>
		</el-dialog>

		<el-table ref="multipleTable" :data="projectroles" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center">
			</el-table-column>
			<el-table-column prop="projectRoleNum" label="编号" width="120" align="center">
			</el-table-column>
			<el-table-column prop="projectRoleName" label="项目角色" width="120" align="center">
			</el-table-column>
			<el-table-column prop="projectRoleStates" label="可操作状态" width="300" align="center">
			</el-table-column>
			<el-table-column prop="projectRoleState" label="状态" width="120" align="center">
			</el-table-column>
			<el-table-column fixed="right" label="操作" align="center" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="changeroleinfo(scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="changestate(scope.row)" v-if="scope.row.projectRoleState == '有效'">禁用</el-button>
					<el-button type="text" size="small" @click="changestate(scope.row)" v-else>启用</el-button>
					<el-button type="text" size="small" @click="removerole(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>
</template>

<script>
	export default {
		name: 'Projectrole',
		data() {
			return {
				systemRoles: [{
					value: '产品经理',
					label: '产品经理'
				}, {
					value: '普通员工',
					label: '普通员工'
				}],
				user: [],
				multipleSelection: [],
				projectroles: [],
				states: [],
				newrole: {
					rolenum: '',
					rolename: '',
					types: [],
					systemName: ''
				},
				changerole: {
					rolenum: '',
					rolename: '',
					types: [],
					systemSign: ''
				},
				projectrole: {
					projectRoleState: '',
					projectRoleId: ''
				},
				ischangeprojectrole: false,
				isaddprojectrole: false,
				projects: [],
				removesuccess: false,
				donotstate: false,
				removerolebyid: false,
				dostate: false,
				addrules:{
					systemName:[
						{ required: true, message: '请选择系统角色', trigger: 'change' }
					],
					rolenum:[
						{ required: true, message: '请输入角色编号', trigger: 'blur' }
					],
					rolename:[
						{ required: true, message: '请输入角色名称', trigger: 'blur' }
					],
					types:[
						{ type: 'array', required: true, message: '至少选择一个可操作状态', trigger: 'change' }
					]
				},
				changeprole:{
					rolenum:[
						{ required: true, message: '请输入角色编号', trigger: 'blur' }
					],
					rolename:[
						{ required: true, message: '请输入角色名称', trigger: 'blur' }
					],
					types:[
						{ type: 'array', required: true, message: '至少选择一个可操作状态', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			handleSelectionChange(val) {
				console.log(val)
				this.multipleSelection = val;
			},
			getProjectRoles() {
				this.$axios.post("projectRole/getroles").then(resp => {
					if (resp.data.flag) {
						this.projectroles = resp.data.data
					}
				})
			},
			addprojectrole() {
				this.isaddprojectrole = true
			},
			savenewproject() {
        console.log(this.newrole)
				if (this.newrole.rolename != '' && this.newrole.rolename != '' && this.newrole.types.length > 0) {
					if (this.newrole.systemName == "普通员工") {
						for (var i = 0; i < this.newrole.types.length; i++) {
							if (this.newrole.types[i] == "分配") {
								this.$message({
									message: '普通员工不能有分配状态',
									type: 'warning'
								});
								return
							}
						}
            let s = {
            	rolenum:this.newrole.rolenum,
            	rolename:this.newrole.rolename,
            	types:this.newrole.types,
            	systemName:this.newrole.systemName,
            	username:this.user.uname
            }
            this.$axios.post("projectRole/addprojectrole",s).then(resp => {
            	if (resp.data.flag) {
            		this.isaddprojectrole = false
            		this.newrole.rolenum = ''
            		this.newrole.rolename = ''
            		this.newrole.types = []
            		this.getProjectRoles()
            	} else {
            		alert(resp.data.message)
            	}
            })

					}else if(this.newrole.systemName == "产品经理"){
            var bool=false
            for (var i = 0; i < this.newrole.types.length; i++) {
            	if (this.newrole.types[i] == "分配") {
                bool=true
            	}
            }
            if(bool){
              let s = {
              	rolenum:this.newrole.rolenum,
              	rolename:this.newrole.rolename,
              	types:this.newrole.types,
              	systemName:this.newrole.systemName,
              	username:this.user.uname
              }
              this.$axios.post("projectRole/addprojectrole",s).then(resp => {
              	if (resp.data.flag) {
              		this.isaddprojectrole = false
              		this.newrole.rolenum = ''
              		this.newrole.rolename = ''
              		this.newrole.types = []
              		this.getProjectRoles()
              	} else {
              		alert(resp.data.message)
              	}
              })
            }else{
              this.$message({
                message: '管理人员必须拥有分配权限',
                type: 'warning'
              });
            }
          }

				} else {
					alert("部份内容为空，请继续填写")
				}
			},
			removeprojectrole() {
				if (this.multipleSelection.length > 0) {
					let ss = []
					for (var i = 0; i < this.multipleSelection.length; i++) {
						ss[i] = this.multipleSelection[i].projectRoleId
					}
					console.log(ss)
					this.$axios.post("projectRole/removesome", ss).then(resp => {
						console.log(resp)
						if (200 == resp.data.code) {
							this.removerolebyid = true
							this.getProjectRoles()
						}
					})
				}
			},
			getAllstates() {
				this.$axios.post("defectstate/getAllStates").then(resp => {
					if (200 == resp.data.code) {
						this.states = resp.data.data
						console.log(this.states)
					}
				})
			},
			changeroleinfo(s) {
        console.log(s)
				this.changerole.systemSign = s.systemSign
				this.changerole.rolenum = s.projectRoleNum
				this.changerole.rolename = s.projectRoleName
				this.ischangeprojectrole = true
			},
			savechangeroles() {
        console.log(this.changerole)
				if (this.changerole.rolename != '' && this.changerole.rolename != '' && this.changerole.types.length > 0) {
          var bool=false
          if(this.changerole.systemSign=="产品经理"){
            for(var i=0;i<this.changerole.types.length;i++){
              if(this.changerole.types[i]=="分配"){
                bool=true
              }
            }
          }else{
            for(var i=0;i<this.changerole.types.length;i++){
              if(this.changerole.types[i]=="分配"){
                this.$message({
                  message: '普通员工不能有分配权限',
                  type: 'warning'
                });
                return
              }
            }
            bool=true
          }
          if(bool){
            let roleinfo = {
            	rolenum: this.changerole.rolenum,
            	rolename: this.changerole.rolename,
            	types: this.changerole.types,
            	username: this.user.uname
            }
            this.$axios.post("projectRole/changeprojectrole", roleinfo).then(resp => {
            	if (200 == resp.data.code) {
            		this.ischangeprojectrole = false
            		this.changerole.rolenum = ''
            		this.changerole.rolename = ''
            		this.changerole.types = []
            		this.changerole.systemSign=''
            		this.getProjectRoles()
            	} else {
            		alert("修改失败，请稍后重试")
            	}
            })
          }else{
            this.$message({
              message: '管理人员必须拥有分配权限',
              type: 'warning'
            });
          }

				} else {
					alert("部份内容为空，请继续填写")
				}
			},
			changestate(s) {
				this.projectrole.projectRoleId = s.projectRoleId
				this.projectrole.projectRoleState = s.projectRoleState
				this.$axios.post("projectRole/changerolestate", this.projectrole).then(resp => {
					if (200 == resp.data.code) {
						if (s.projectRoleState == '有效') {
							this.donotstate = true
						} else {
							this.dostate = true
						}
						this.getProjectRoles()

					}
				})
			},
			suredonot() {
				this.donotstate = false
				this.dostate = false
			},
			removerole(s) {
				let ss = {
					projectRoleId: s.projectRoleId
				}
				this.$axios.post("projectRole/removerole", ss).then(resp => {
					if (200 == resp.data.code) {
						this.removerolebyid = true
					}
				})
			},
			sureremove() {
				this.removerolebyid = false
				this.getProjectRoles()
			}
		},
		created() {
			this.user = JSON.parse(sessionStorage.getItem("user"))
			this.getProjectRoles()

		}
	}
</script>

<style>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99aabf85;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
</style>
